<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Question Manager</title>
        <script type="text/javascript">  
            function expand(id) {
                var el=document.getElementById(id);
                if (el.style.display!="none"){
                    el.style.display="none";
                }else{
                    el.style.display="block";
                }
            }
        </script>  
    </head>
    <body bgcolor="white">
        <%@include file="tpl_header.jsp"%>
          <center><img src="imgs/design_questions.png" width="400px" height="90px"></center>
        <table width="100%" border="0">
            <tr>
                <td width="65%">  <%@include file="QuestionMess.jsp"%>
                    <table width="100%" border="0">
                        <tr>
                            <td><a href="#" onClick="expand('questiontemplate');"><img  src="imgs/expand.jpg" alt="Expand"></a>Base Question Template:</td>
                        </tr>
                    </table>
                    <div id="questiontemplate" style="display:block">  
                        <form id="Main1" action="" method=post>
                            <p>
                                <select name="qqtype" title="Topic of this question. The processing of each topic is slightly different. ">
                                    <option value="WholeNumber" <%if (qqtype.equals("WholeNumber")) {%> selected="selected" <%}%> >Whole Number</option>
                                    <option value="Algebra" <%if (qqtype.equals("Algebra")) {%> selected="selected" <%}%> >Algebra</option>                                
                                    <option value="Decimals" <%if (qqtype.equals("Decimals")) {%> selected="selected" <%}%> >Decimals</option>
                                </select>  
                            </p>
                            <div><textarea name=question rows="5" cols="80" ><%=nonull(n.getQuestion0())%></textarea><label style="vertical-align: bottom;font-size: 0.825em;color: blue" title="Input a normal question, click 'Auto Generate Variables' to transform it into a template. Or you can modify your variables manually (i.e. change the numbers to be randomized to 'var_int1','var_int2', and so on, then click 'Auto Generate Variables' button to generate template.">[Help?]</label></div>
                            <p><a title="Scan for numbers and make them radomized by set them to 'var_int1','var_int2', and so on. You can modify them manually after this step, then click 'Auto Generate Variables' button to update"><input name="submit" type=submit value="Auto Generate Variables" onClick="return confirm('Sure? Unsaved variable definition, relations, solutions for this question will be lost!')"></a>
                                <!--<input name="submit" type=submit title="Scan for 'var_int1','var_int2', and so on. You can modify them manually after this step, then click 'Init Variable' again to update" value="Init Variables" onClick="return confirm('Sure? Unsaved variable definition, relations, solutions for this question will be lost!')"> 
                                -->
                                <a title="Enter New Questions. All fields will be cleared."><input name="submit" type=submit  value="Reset" onClick="return confirm('Are you sure to Reset? Unsaved changes will be lost!')"></a>
                                <a  title="To update only the template (i.e. some words). E.g. You make a typo when typing the question in. Correct it and click this button."><input name="submit" type=submit value="Upd Question"></a>                                                  
                                <!--                            
                                                            <INPUT TYPE="BUTTON" VALUE="Dictionary Manager" ONCLICK="window.location.href='QContentMan.jsp'"> 
                                                            <INPUT TYPE="BUTTON" VALUE="Sub Template Manager" ONCLICK="window.location.href='QStructMan.jsp'"><p><p>-->
                        </form>
                    </div>
                    <% if (VarList.size() > 0) {%>
                    <table width="100%" border="0">
                        <tr>
                            <td><a href="#" onClick="expand('variablelist');"><img src="imgs/expand.jpg" alt="Expand"></a>Define Variables' Ranges:</td>
                        </tr>
                    </table>
                    <div id="variablelist" style="display:block">  
                        <table style="width: auto;">
                            <tbody>
                                <tr>
                                    <th>Name</th>
                                    <th>Minimum</th>
                                    <th>Step Size</th>
                                    <th>Maximum</th>
                                    <th>Multiplier</th>
                                    <th>Sequence</th>
                                    <th>Decimals</th>
                                </tr>
                                <% for (var_count = 0; var_count < VarList.size(); var_count++) {%>       
                            <form action="" method=post>

                                <tr><td>
                                        <input  type="text" name=var size="8" maxlength="20" value=<%=nonull(n.getVariable(VarList.get(var_count)))%>> 
                                    </td>

                                    <%--                        <select name="var_type">
                                                                <% for (int i = 0; i < rs.length && rs[i] != null; i++) {
                                                                        if (sVar_type != null && sVar_type.equalsIgnoreCase(rs[i])) {%>
                                                                <option  selected><%=rs[i]%></option>    
                                                                <% } else%>
                                                                <option  ><%=rs[i]%></option>
                                                                <% }%>
                                                            </select>
                                    --%>
                                    <% if (n.getFraType(VarList.get(var_count)).equalsIgnoreCase("isFra")) {%>
                                    <td><input type="text" name=min size="4" maxlength="20" value=<%=(float) (n.getMin(VarList.get(var_count))) / 100%> > </td>
                                    <td><input type="text" name=step size="4" maxlength="20" value=<%=(float) (n.getStep(VarList.get(var_count))) / 100%>> </td>
                                    <td><input type="text" name=max size="4" maxlength="20" value=<%=(float) (n.getMax(VarList.get(var_count))) / 100%>> </td>
                                        <%} else {%>
                                    <td><input type="text" name=min size="4" maxlength="20" value=<%=n.getMin(VarList.get(var_count))%> > </td>
                                    <td><input type="text" name=step size="4" maxlength="20" value=<%=n.getStep(VarList.get(var_count))%>> </td>
                                    <td><input type="text" name=max size="4" maxlength="20" value=<%=n.getMax(VarList.get(var_count))%>> </td>
                                        <%}%>
                                        <% if (n.getTimType(VarList.get(var_count)).equalsIgnoreCase("isTimes")) {%>
                                    <td><a title="Time Value(Shown as Twice/5 times)"><input TYPE=checkbox name=timtype VALUE="isTimes" checked="yes">Time </a> </td>
                                            <%} else {%>
                                    <td><a title="Time Value(Shown as Twice/5 times)"><input TYPE=checkbox name=timtype VALUE="isTimes">Time </a> </td>                            
                                            <%}%>
                                            <% if (n.getOrdType(VarList.get(var_count)).equalsIgnoreCase("isOrder")) {%>
                                    <td><a title="Order Value(Shown as First/28th)"><input TYPE=checkbox name=ordtype VALUE="isOrder" checked="yes">Order </a> </td>
                                            <%} else {%>
                                    <td><a title="Order Value(Shown as First/28th)"><input TYPE=checkbox name=ordtype VALUE="isOrder">Order </a> </td>                            
                                            <%}%>  
                                            <% if (n.getFraType(VarList.get(var_count)).equalsIgnoreCase("isFra")) {%>
                                    <td><a title="Fraction Value(Shown as 1.00/3.14)"><input TYPE=checkbox name=fratype VALUE="isFra" checked="yes">Fraction </a> </td>
                                            <%} else {%>
                                    <td><a title="Fraction Value(Shown as 1.00/3.14)"><input TYPE=checkbox name=fratype VALUE="isFra">Fraction </a> </td>                            
                                            <%}%>   
                                    <td><input name="submit" type=submit value="Update" disabled=true">  </td>
                                </tr>

                            </form>
                            <%  }%>   

                            </tbody>
                        </table> 
                    </div>

                    <table width="100%" border="0">
                        <tr>
                            <td><a href="#" onClick="expand('solutionlist');"><img src="imgs/expand.jpg" alt="Expand"></a>Create Solution:</td> 
                        </tr>
                    </table>
                    <div id="solutionlist" style="display:block"> 
                        <table style="width: auto;">
                            <tbody>
                                <tr style="text-align: left">
                                    <th>Solution Description</th>
                                    <th>Solution Expression</th>
                                    <th>Add/Delete</th>
                                </tr>
                            <form action="" method=post>	
                                <tr><td>
                                        <input type="text" name=solexpl size="40" maxlength="120" onFocus="if(this.value.toString().substr(0,3)=='e.g')this.value='';"  value="e.g. Find out...">
                                    </td><td><input type="text" name=solexpr size="40" maxlength="240" onFocus="if(this.value.toString().substr(0,3)=='e.g')this.value='';"  value="e.g. var_int1+var_int2">                
                                    </td><td><input name="submitsol" type=submit value="Add"  disabled=true"></td>
                                </tr>


                            </form>


                            <% for (var_count = 0; var_count < SolList.size(); var_count++) {%> 
                            <form action="" method=post>
                                <tr>

                                    <%--hj the replace make sure the < sign can be displayed --%>
                                    <% String sol = (SolList.get(var_count)).replace("<", " < ");
                                        String[] solarray = new String[2];
                                        solarray = sol.split("var_sep");
                                    %>
                                    <td><b>Step <%=var_count + 1%>:</b><%=n.getSolutionExpl((SolList.get(var_count)).replace("<", " < "), 0)%> 
                                    </td><td><b><%= n.getSolutionExpr((SolList.get(var_count)).replace("<", " < "))%></b>
                                    </td>
                                    <td>
                                        <input name="submitsol" type=submit value="Delete"  onClick="return confirm('Are you sure to delete this solution?')">
                                    </td>
                                <input name="sol_id" type="hidden" value=<%=var_count%>>
                                </tr>
                            </form>
                            <%  }%>	 
                            </tbody>
                        </table> 
                    </div>

                    <table width="100%" border="0">
                        <tr>
                            <td><a href="#" onClick="expand('relationlist');"><img src="imgs/expand.jpg" alt="Expand"></a>Add Variable Relationship:</td> 
                        </tr>
                    </table>
                    <div id="relationlist" style="display:block"> 
                        <table style="width: auto;">
                            <tbody>
                                <tr style="text-align: left">
                                    <th>Variable Relations</th>
                                    <th>Add/Delete</th>
                        </tr>
                        <form action="" method=post>	
                                                     <tr>

                            <td>
                            <input type="text" name=rel size="40" maxlength="120" onFocus="if(this.value.toString().substr(0,3)=='e.g')this.value='';"  value="e.g. Var_int1 < Var_int2">
                                 </td><td><input name="submit" type=submit value="Add"  disabled=true"></td>
                                                     </tr>
                        </form>
                        <% for (var_count = 0; var_count < RelList.size(); var_count++) {%> 
                        <form action="" method=post>
                            <tr>
                                
                            <%--hj the replace make sure the < sign can be displayed --%>
                                <td><%= (RelList.get(var_count)).replace("<", " < ")%></td>
                                <td><input name="submit" type=submit value="Delete"  onClick="return confirm('Are you sure to delete this relation?')"></td>
                            </tr>
                            <input name="rel_id" type="hidden" value=<%=var_count%>>
                        </form>
                        <%  }%>	                   
                            </tbody>
                        </table> 
                    </div>

                    <%  }%>

                </td>                                      
                <%@include file="QuestionPreview.jsp" %>
            </tr>
        </table>
        <table>
            <tr>            
                <%if (!n.getHint().equals("no hint")) {%>
            <font color="red"><%=n.getHint()%></font><br>
            <%}%>
            </tr>
        </table>
        <table width="100%" border="0">                                                        
            <tr>
                <td><a href="#" onClick="expand('DBquestionlist');"><img src="imgs/expand.jpg" alt="Expand"></a>List of Questions: 
                </td> 
            </tr>
        </table>
        <div id="DBquestionlist" style="display:none">
            <%@include file="QuestionList.jsp"%> 
        </div>  
      <p>
    <table border="0" align="center">
<tr>
<td><a href="TopicListController"><img src="imgs/backToPrevious.png" width="400px" height="80px"/></a></td>
<td><a href="ReviewQuestionAndSolution.jsp?doPra=1"><img src="imgs/reviewQuestionAndSolution.png" width="400px" height="80px"/></a></td>
</tr>
</table>

        <%@include file="tpl_footer.jsp"%>
    </body>

    <script>
        $("select").change(function () {
            var str = "Topic: ";
            $("select option:selected").each(function () {
                str += $(this).text() + " ";
            });
          $("#MesBoard").text(str);
        })
        .change();

        jQuery(function() {
            //hj: validation, no empty string should be allowed.
            function validateRow(tr) {
                var valid = true;
        
                tr.find('input[type="text"]').each(function(i, el) {
                    if (!el.value.replace(' ', '')) return valid = false;
                });        
                tr.find('input[type="submit"]').attr('disabled', valid? false : true);
            }

            jQuery('tr').find('input').change(function() {
                validateRow(jQuery(this).closest('tr'));
            });
        });
    </script>

</html>
